<template>
    <div class="book-step-1">
        <van-field 
            v-model="form.city" 
            placeholder="请选择房屋所在城市" 
            @click="cityVisible = true"
            readonly
            icon="arrow"/>
        <van-field v-model="form.area" placeholder="请输入房屋面积（单位：平方米）" />
        <van-popup position="bottom" get-container="#bookStep" v-model="cityVisible">
            <van-area 
                title="选择城市" 
                :area-list="areaList" 
                :columns-num="2" 
                @confirm="onCitySelect"
                @cancel="cityVisible = false"
            />
        </van-popup>
    </div>
</template>

<script>
import areaList from './areaList'
export default {
    data(){
        return {
            form: {
                city: '',
                cityCode: '',
                area: '',
            },
            areaList,
            cityVisible: false,
        }
    },
    methods: {
        onCitySelect(value){
            this.form.city = value[1].name
            this.form.cityCode = value[1].code
            this.cityVisible = false
        },
    }
}
</script>
